<template>
	<view class="goods-detail bg-page" :style="'min-height:'+$xyfun.xysys().windowHeight+'px'" v-if="!empty">
<!--    这样子写可以默认banner使用最高的那张作为容器的高度-->
    <view class="goods-banner" v-if="goods.images.length>0">
      <view class="auto-height">
        <image v-for="(item, keys) in goods.images" mode="widthFix" v-if="keys==0" :key="keys" :src="item"></image>
      </view>
      <swiper class="gb-swiper" :circular="true" :autoplay="false" interval="5000" duration="500">
        <swiper-item v-for="(item, keys) in goods.images" :key="keys" >
          <image mode="widthFix" :src="item" @tap="$xyfun.pi(keys,goods.images)" />
        </swiper-item>
      </swiper>
    </view>
    <view v-else>
      <xy-empty :text="'暂无演示图片'"></xy-empty>
    </view>

		<view class="info-box m-lr-30 p-tb-30 p-b-30 br-10 bg-w">
			<view class="m-lr-30">
				<view class="price-box flex">
					<view class="l flex">
						<view class="price ts-42 tb m-r-20 tc-r">¥{{goods.price}}</view>
					</view>
					<view class="r m-l-auto ts-34 ">
						<text class="xyicon m-r-30 ts-32 icon-share1 tc-999" @tap="showShare = !showShare"></text>
					</view>
				</view>
				<view class="name-box m-t-20">
					<view class="name ts-32 tb">{{goods.title}}</view>
				</view>

				<view class="tags flex m-t-20 ts-24" v-if="goods.tags.length>0">
					<view class="item m-r-30 br-10 bl tm2" v-for="(item,index) in goods.tags" :key="index">{{item}}</view>
				</view>

				<view class="ss flex ts-26 m-t-20 tc-999">
					<view class="item">运费：0.00</view>
					<view class="item">库存：{{goods.stock}}</view>
					<view class="m-l-auto">销量：{{goods.show_sales + goods.sales}}</view>
				</view>
        <view v-if="goods.store_id>0" class="store_name">店铺：<text>{{goods.store.name}}</text></view>
			</view>
		</view>

		<!-- 规格选择 -->
		<view class="sku-box m-30 flex p-tb-30 p-lr-30 br-10 bg-w" @tap="user.isLogin ? showSku = true : $xyfun.toLogin()" v-if="goods.is_sku == 1">
			<view class="l">
				<text class="title m-r-20 tc-999">规格</text>
				<text class="tip">{{ currentSkuText || '请选择规格' }}</text>
			</view>
			<view class="xyicon icon-right ts-34 m-l-auto tc-999"></view>
		</view>

		<view class="detail-box m-30 p-t-30 br-10 bg-w">
			<view class="tabs flex tb wa bg-w" style="justify-content: space-evenly;">
					<view :class="tabModel=='goods'?'tabItem act':'tabItem'" @click="tabModel='goods'">
						商品详情
						<view class="line m-t-10 tm2b"></view>
					</view>
        <view :class="tabModel=='comment'?'tabItem act':'tabItem'" @click="tabModel='comment'">
            评论
            <view class="line m-t-10 tm2b"></view>
          </view>
			</view>
			<view class="m-t-25 des" v-if="tabModel=='goods'">
				<rich-text :nodes="$xyfun.richTextHandle(goods.content)"></rich-text>
			</view>
      <view class="m-t-25 des" v-if="tabModel=='comment'">
        <xy-comment :comment_list="goods.comment" v-if="goods.comment.length>0"></xy-comment>
      </view>
		</view>

		<view class="bottom-fixed flex tc bg-w">
			<view class="p-lr-30 p-tb-15 flex tc wa">
				<button open-type="contact" class="kefu m-r-25 tc lh-32 tc-999">
					<text class="xyicon icon-kefu ts-36 lh-36"></text>
					<view class="text ts-26 m-t-10 lh-28">客服</view>
				</button>
				<button class="kefu psr tc lh-32 tc-999" @tap="$xyfun.to('/pages/cart');">
					<text class="yz-iconfont yz-gouwuche ts-36 lh-36"></text>
					<view class="psa cart-num ts-24 lh-24 tc-w tm2b" v-if="cart.cartNum > 0">{{cart.cartNum}}</view>
					<view class="text ts-26 m-t-10 lh-28">购物车</view>
				</button>
        <button class="kefu psr tc lh-32 tc-999" @tap="onFavorite()">
          <text class="yz-iconfont yz-shoucang1 ts-36 lh-36" v-if="goods.favorite == null"></text>
          <text class="yz-iconfont yz-yishoucang ts-36 lh-36 tm2" v-else></text>
          <view class="text ts-26 m-t-10 lh-28">收藏</view>
        </button>

				<view class="action flex m-l-auto">
					<view class="add-cart ts-28 m-r-20 tc-w tm2b" @tap="addCart">
						加入购物车
					</view>
					<view class="buy ts-28 m-l-auto tc-w tm3b" @tap="goPay">
						立即购买
					</view>
				</view>

			</view>
		</view>

		<!-- 规格弹窗 -->
		<xy-goods-sku
			v-if="showSku && goods.id"
			v-model="showSku"
			:goodsInfo="goods"
			:buyType="buyType"
			:goodsType="goodsType"
      DefaultBuyNum="1"
			@changeType="changeType"
			@getSkuText="getSkuText"
		/>

		<!--分享组件 -->
		<xy-share v-model="showShare" posterType="goods" :posterInfo='goods' />

	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import xyEmpty from '@/components/xy-empty/index';
	import xyGoodsSku from '@/components/xy-goods/sku';
	import xyShare from '@/components/xy-share';
	import share from '@/utils/share';
  import xyComment from "@/components/xy-comment/index.vue";
	export default {
		components: {
      xyComment,
			xyEmpty,
			xyGoodsSku,
			xyShare
		},
		data() {
			return {

				lat: 0,
				lng: 0,
				empty:true,
				id: 0,
				goods:{},
				showSku:false,
				buyType: 'sku',
				goodsType: 'goods',
				currentSkuText:'',
				showShare:false,

        tabModel: 'goods',
			}
		},
		computed: {
			...mapState(['common','user','cart'])
		},
		async onLoad() {
			var options = this.$Route.query;

			// #ifdef MP
			if (options?.scene) {
				options = this.$xyfun.sceneDecode(options.scene);
			}
			// #endif

			if(options?.id){
				this.id = options.id;
			}


			this.loadData();
		},
		onUnload() {
			share.setShareInfo();
		},
		methods: {

			async loadData(){
				this.$api.get({
					url: '/goods/detail',
					loadingTip:'加载中...',
					data: {
						id:this.id,
					},
					success: res => {
						this.empty = false;
						this.goods = res;
						share.setShareInfo({
							title: res.title,
							desc: res.title,
							image: res.image,
							params: {
								page: 5,
								pageId: this.id
							}
						});
					}
				});
			},


			// 加入购物车
			addCart() {
				if (this.user.isLogin) {
					this.buyType = 'cart';
					this.showSku = true;
				} else {
					this.$xyfun.toLogin();
				}
			},

			// 立即购买
			goPay() {
				if (this.user.isLogin) {
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$xyfun.toLogin();
				}
			},

			// 组件返回的type;
			changeType(e) {
				this.buyType = e;
			},

			// 组件返回的规格;
			getSkuText(e) {
				this.currentSkuText = e;
			},

      // 收藏
      onFavorite() {
        if (this.user.isLogin) {
          this.$api.post({
            url: '/user_favorite/add',
            data: {
              target_id:this.id,
              type:'goods'
            },
            success: res => {
              this.goods.favorite = res;
              this.$xyfun.msg(res?'收藏成功' : '取消收藏');
            }
          });
        } else {
          this.$xyfun.toLogin();
        }
      },

		}
	}
</script>

<style scoped lang="scss">
.goods-banner{
  position: relative;
  .auto-height{
    display: flex;
    opacity: 0;
    image{
      width: 100%;
    }
  }
  .gb-swiper{
    flex: 1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    image{
      width: 100%;
    }
  }
}
	.goods-detail{
		padding-bottom: 200rpx;
		.top{position: absolute;left: 0;top: 0;}
		.top,.top swiper{
			width: 750rpx;height: 750rpx;
			image{
				width: 750rpx;min-height: 750rpx;
			}
			.total{
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				position: absolute; right: 30rpx; bottom: 60rpx;
				padding: 3rpx 20rpx;border-radius: 20rpx;
				text{margin: 0 5rpx;}
			}
		}

		.info-box{
			z-index: 100;width: 690rpx;position: relative;
			.tags{
				.item{padding: 3rpx 10rpx;line-height: 24rpx;}
			}
			.ss{
				.item{width: 33%;}
			}
      .store_name{
        margin-top: 15rpx;
        font-size: 24rpx;
        display: inline-block;
        color: #999;
        text{
          background: $theme1;
          color: #fff;
          padding: 0 20rpx;
          border-radius: 10rpx;
        }
      }
		}

		.detail-box{
      min-height: 400rpx;
      .tabs{
        .tabItem{
          color: #999;
          .line{
            height: 2px;width: 30%;margin-left: 35%;display: none;
          }
        }
        .act{
          color: $theme2;
          .line{
            display: block;
          }
        }
      }
		}

		.bottom-fixed{
      z-index: 999;
			button{background: none;padding: 0;margin-left: 0;}
			button::after{border: none;}

			.cart-num{right: 0rpx;top: 0rpx;border-radius: 50%;padding: 4rpx;min-width: 24rpx;z-index: 100;min-height: 24rpx;}
			.buy,.add-cart{width: 200rpx;height: 72rpx;border-radius: 36rpx;line-height: 72rpx;}
		}
	}

</style>
